\documentclass[12pt,a4paper]{article}
\usepackage[dutch]{babel}	
\usepackage{graphicx}
\usepackage{fancyhdr}
\graphicspath{{images/}}

\usepackage[top=2cm, bottom=2cm]{geometry}
\author{Pleun Willemsen en  Walter Ebbers }
\title{Documentatie Distributed Services \\.NET Webservices }
\date{\today\\v1.0}

\begin{document}
\maketitle
\newpage
\tableofcontents
\newpage
\section*{Revisie geschiedenis}
\begin{tabular}{|p{2cm}|p{1cm}|p{6cm}|p{4cm}|}
\hline Datum & Versie & Omschrijving & Auteur \\ 
\hline 21-02-2012 & 0.1 & template gemaakt & Pleun Willemsen \\ 
\hline 22-02-2012 & 0.2 & Client informatie toegevoegd & Walter Ebbers\\
\hline 22-02-2012 & 0.3 & Webservice toegevoegd & Pleun Willemsen\\
\hline 22-02-2012 & 0.4 & LINQ to SQL toegevoegd & Pleun Willemsen\\
\hline 22-02-2012 & 0.5 & Eigen Mening & Walter en Pleun \\ 
\hline 22-02-2012 & 0.6 & Testcases & Pleun Willemsen\\
\hline 22-02-2012 & 0.7 & Initi\"ele analyse toegevoegd & Walter Ebbers\\
\hline 22-02-2012 & 0.8 & Client implementatie uitgewerkt & Walter Ebbers\\
\hline 23-02-2012 & 0.9 & Analyse uitgebreid met schetsen & Walter Ebbers\\
\hline 23-02-2012 & 1.0 & Oplevering & Walter en Pleun\\
\hline
\end{tabular} 

\section*{Begrippen}
\begin{tabular}{|p{4cm}|p{9cm}|}
\hline Begrip & Uitgeschreven:  \\ 
\hline DS & Distributed Services   \\ 
\hline .NET & Microsoft framework voor ontwikkeling \\ 
\hline XML & Extensible Markup Language \\ 
\hline LINQ & Language Integrated Query \\
\hline WSDL & Web Services Definition Language is een XML-document, bestaande uit een verzameling definities\\ 
\hline 
\end{tabular} 
\newpage

\section{Inleiding}
Dit document is bedoelt ter verslaglegging van de opdracht .NET van Distributed Services. In het verslag staan verschillende zaken zoals een analyse, een webservice implementatie uitleg, Cli\"ent implementatie uitleg, Cli\"ent gebruikershandleiding en onze persoonlijke bevindingen. 
Dit document is bedoeld ter verslaglegging van de opdracht .NET van Distributed Services.

\subsection{Opdracht}
Het warenhuis “[S]Aktiehuis” wil zijn omzet vergroten met behulp van het internet en overweegt toepassing van een of meerdere middleware technologie\"en. Het bedrijf stelt zich voor informatie over haar producten te geven via internet en klanten in staat te stellen bestellingen te doen. Hiertoe heeft [S]Aktiehuis de prijzen van haar producten vastgelegd. Cli\"enten kunnen vragen om de prijslijst en krijgen deze dan aangeboden. Verder kunnen cli\"enten een bestelling plaatsen. Globaal gezien gaat dat als de afbeelding hieronder:\\\\

\includegraphics[scale=0.80]{opdracht}\\\\
Toelichting bij de berichten:
\begin{itemize}
\item Een klant kan bij het opvragen van een produktlijst eventueel een produktsoort opgeven om de selectie te beperken
\item Een klant geeft aan te willen bestellen. [S]Aktiehuis genereert een nieuw bestelNr. Je zou dit als een winkelwagentje voor deze sessie kunnen beschouwen. Identificatie van de klant vindt plaats door middel van zijn naam.
\item De klant bestelt een aantal produkten.
\item Te allen tijde kan de klant een overzicht krijgen van alles wat tot dan toe besteld is.
\item Als de bestelling naar tevredenheid is samengesteld, maakt de klant de bestelling definitief.

\end{itemize}


\newpage
\section{Analyse}
%Hoe zijn we tot dit gekomen?
Ter voorbereiding van de opdracht is er eerst gekeken na wat er in de modulehandleiding stond. De diagram die in de opdrachtopschrijving stond hebben we gebruikt om de applicatie op te bouwen. Verder is er een klassendiagram gemaakt met daarin de namen van de classen en de verbindingen tussen de andere classes.\\\\

\includegraphics[scale=0.65]{Client_Webservice}.
\\\\
Aan de linkerkant staan de classes van de cli\"ent applicatie en aan de rechterkant de classes van de webservice.\\
Hierna hebben we de database opgebouwd en deze is tijdens het ontwikkelen nog 1 a 2 keer aangepast om deze beter te laten werken volgens de opdrachtomschrijving. 
\\\\
Aan de hand van de class diagram zijn er ook schetsen gemaakt, deze hebben we gebruikt om de applicatie te maken.
De schetsen zijn als volgt:\\\\
\includegraphics[scale=0.70]{schermInloggen}\\Inlogscherm\\\\
\includegraphics[scale=0.65]{schermKlant}\\Klantinformatiescherm\\\\
\includegraphics[scale=0.65]{schermBestelgeschiedenis}\\Bestelgeschiedenis scherm\\\\
\includegraphics[scale=0.65]{schermProducten}\\Producten- en bestelscherm\\\\
\includegraphics[scale=0.65]{schermNieuwProduct}\\Nieuw product aanmaken scherm\\

\newpage
\section{Webservice}
Een webservice kan omschreven worden als een applicatiecomponent die toegangelijk is via standaard webprotocollen, waarbij gecommuniceerd wordt middels XML. Een webservice maakt het mogelijk om op afstand(meestal over het Internet) vanaf een client (web)applicatie een dienst op te vragen aan een server. De service wordt beschreven met behulp van WSDL.

\subsection{Implementatie}

Hieronder is aangegeven hoe stap voor stap de webservice is opgebouwd en hoe de opdracht in gerealiseerd:
Start Visual Studio en kies een nieuwe project. Selecteer .NET Framework 3.5 en kies het ASP.NET Web Service Application project.\\\\
\includegraphics[scale=0.50]{ws_stap1}\\\\

Visual Studio zet de gehele ontwikkelomgeving op en laad de webservice klasse zoals hieronder. De webservice is opgezet met een methode die "Hello World" terug geeft. Alle methoden de aan te roepen zijn, staan in deze klasse. Dit is de buitenkant van de applicatie waar clients tegen aan kunnen 'praten'. Deze klasse kun je uitbreiden met meer methoden en vanuit die methoden kun zijn ook achterliggende klasses aan te roepen die de logica uitvoert voor het bijbehorende request.\\\\
\includegraphics[scale=0.80]{ws_stap1_1}\\\\
\includegraphics[scale=0.80]{ws_stap1_2}\\\\

Door de webservice te starten (F5) wordt er een webpagina geladen. Zoals hieronder:\\\\
\includegraphics[scale=0.30]{ws_stap2}\\\\

Bovenin is de HelloWorld methode zichtbaar. Door hier op te klikken zijn er meer details beschikbaar o.a. SOAP versies. \\\\
\includegraphics[scale=0.30]{ws_stap3}\\\\
\includegraphics[scale=0.30]{ws_stap3_1}\\\\

Door op Invoke te klikken, roep je de methode aan. Hier is de mogelijkheid om parameters mee te geven.\\\\
\includegraphics[scale=0.30]{ws_stap4}\\\\
\includegraphics[scale=0.30]{ws_stap4_1}\\\\
De methode geeft een antwoord in XML terug. Dit kan de client verwerken.

\newpage
\subsection{Linq to SQL}

LINQ is een onderdeel van het Microsoft .NET Framework. Linq biedt een werkwijze aan voor een meer uniforme omgang met gegevens uit heel verschillende systeem, denk hierbij aan gegevens uit een database, van een webservice, xml bestand etc.
\subsubsection{Implementatie}

Voeg een nieuw item toe aan het webservice project genaamd 'LINQ to SQL Classes'.\\\\
\includegraphics[scale=0.50]{ws_stap5}\\

Zorg dat er verbinding is met de Miscrosoft SQL Server. Sleep de tabellen die gebruikt moeten worden naar de (zojuist aangemaakte) LINQ to SQL Classes\\\\
\includegraphics[scale=0.50]{ws_stap5_1}\\

Vanuit andere klasses is het nu mogelijk om de DataContext te gebruiken. Zie het voorbeeld hieronder:\\\\
\includegraphics[scale=0.80]{ws_stap5_2}\\\\

Als LINQ in een standalone applicatie gebruikt wordt, zijn de objecten direct op te vragen. Maar als LINQ gebruik wordt in de vorm van een webservice dan zijn deze objecten niet te returnen. De client snapt niet wat er dan ontvangen wordt. Een oplossing is om zelf een klasse te maken. Deze objecten worden gevuld met de waarden vanuit LINQ en die zijn ook voor de client te begrijpen.\\\\
\includegraphics[scale=0.80]{ws_stap5_3}\\\\




\newpage
\section{Client}

\subsection{Implementatie}
Om gebruik te kunnen maken van de webservice aan de cli\"ent kant moet deze als datasource toegevoegd worden aan het project. Via de onderstaande stappen is de webservice aan de cli\"ent toegevoegd zodat deze te gebruiken is.
Om met de webservice te kunnen verbinden moet wel de url bekend zijn. Voor dit project is er gebruik gemaakt van de interne webserver van Visual Studio en ook van een IIS server op een windows 2008 R2 machine.\\\\
\includegraphics[scale=0.70]{c1}\\
Via Data, Add new data source wordt de webservice toegevoegd.\\\\
\includegraphics[scale=0.50]{c2}\\ 
In dit scherm moet er gekozen worden voor het type Service.\\ \\ 
\includegraphics[scale=0.80]{c3}\\ Service geselecteerd.\\\\
\includegraphics[scale=0.80]{c4}\\ 
In dit venster moet bij "Address" de url ingevoerd worden van de webservice en op "Go" geklikt worden. Er wordt dan geprobeerd een verbinding te maken met de webservice.\\ \\ 
\includegraphics[scale=0.80]{c5}\\
Url van webservice ingevoerd.\\\\
\includegraphics[scale=0.80]{c6}\\ 
Er is een verbinding gemaakt en door bij Services op het plusje van Service 1 te klikken(Naam kan verschillen, dit ligt aan hoe de webservice is opgezet) die verschijnt als je met de muis op Service 1 gaat staan is er een Service1Soap te zien(ook deze naam kan anders zijn). Als er geklikt wordt op de Service1Soap is er te zien welke functies er allemaal te gebruiken zijn. \\ 
\includegraphics[scale=0.80]{c7}\\ 
Na op Ok te hebben geklikt komt het laatste scherm van de "Add Data Source" window te voorschijn waarin de url van de webservice staat met een vinkje erbij.\\\\
\includegraphics[scale=0.80]{c8}\\ 
In het visual studio project is er bij de solution explorer een mapje met de naam "Services References" bijgekomen. Hierin staat de verbinding na de webservice. Als de webservice geupdate word zal de webservice verbinding in de applicatie ook vernieuwd moeten worden. Dit is te doen door rechtermuisknop te doen op de webservice en op "Update Service Reference" te klikken. Een laadbalk verschijnt en de service wordt bijgewerkt.\\\\
Om de gekoppelde webservice te gebruiken in een applicatie hoeft er alleen in de code een link gelegd worden na de gekoppelde service. In VB.NET gebeurd dit zo: "Private webser As New Service1SoapClient". \\
Door de intellisense van visual studio komt er bij het typen van "webser." de lijst na voren met alle functies er er aangeroepen kunnen worden. Zo kan er bijvoorbeeld een datagridview gevuld worden met informatie die je bind met een webservice methode. 
\\\\
Naast het gebruik van de webservice methoden is het ook mogelijk een aantal klasses van de webservice aan te roepen. Dit zijn de standaard class bestanden(zoals naam.vb, naam.cs of een naam.java).
Om deze bestanden te kunnen gebruiken moet het volgende doorlopen worden zoals te lezen is vanaf de volgende pagina's.\\\\
\includegraphics[scale=0.80]{c9}\\ Via Data, Show Data Sources uit het menubalk komt er een venster bij waarin te zien is welke classes er te gebruiken zijn. \\\\
\includegraphics[scale=0.80]{c10}\\ Het bijgekomen venster links met de naam "Data Sources" \\\\
\includegraphics[scale=0.80]{c11}\\ Hier is te zien hoe de class aan geroepen kan worden in een VB.NET applicatie. Doordat de applicatie in eerste instantie niet meteen weet waar de aangemaakte class vandaan komt moet er nog een link gelegd worden hiervoor. Dit gebeurt door een import. Deze is te zien op het volgende plaatje.\\\\
\includegraphics[scale=0.80]{c12}\\ Import staat bovenaan in de class en de blauwe ringellijn is verdwenen onder de Classname. \\
\includegraphics[scale=0.80]{c13}\\ Voorbeeld aanroep van de aangemaakte class.

\newpage
\section{Testcases}
Om de webservice te testen hebben we gebruik gemaakt van SoapUI. Wij hebben hier voor gekozen omdat je makkelijk en snel testen kan maken, in tegenstelling tot Visual Studio 2010 (zie persoonlijke bevindingen). \\
\\
\includegraphics[scale=0.8]{test_1}
\\
In onze testen maken we gebruik van assertions zoals:
\begin{itemize}
	\item Contains
	\item Not Soap fault
	\item Soap response
\end{itemize}

\includegraphics[scale=0.8]{test_2}

\newpage
\section{Gebruikershandleiding}
Na het programma te hebben gestart verschijnt het volgende scherm:\\\\
\includegraphics{cf1}\\
\\
Als er geen gebruikersnaam opgegeven wordt en op inloggen geklikt wordt zal een melding verschijnen. Klik hier op ok en voer de juiste gebruikersnaam in.\\\\
\includegraphics{cf1_1}\\
\\
Als er een gebruikersnaam wordt opgegeven die niet bestaat zal dezelfde melding verschijnen. Klik hier ook weer op OK en voer de juiste gebruikersnaam in. \\\\
\includegraphics{cf1_2}\\
\newpage
Indien er nog geen account is aangemaakt dient er op de "Registreren" knop geklikt te worden. Het volgende scherm verschijnt en een gebruiker kan zich aanmelden.\\\\
\includegraphics{cf2}\\
\\Mocht de gebruiker een bestaande gebruikersnaam opgeven verschijnt er een melding hiervan. Klik hier op Ok en kies een andere gebruikersnaam.\\\\
\includegraphics{cf2_2}\\
\newpage Na het formulier volledig te hebben ingevuld zoals in het onderstaande plaatje klik je op Inschrijven. De software controleerd of alles ingevoerd is en zal dan deze gegevens opslaan.\\\\
\includegraphics{cf2_3}\\
\\ Na een tijdje verschijnt de melding dat de gegevens succesvol zijn opgeslagen en dat je wordt terug gestuurd na het inlogscherm. Klik hier weer op Ok.\\\\
\includegraphics{cf2_4}\\\\
 Als je weer op het inlogscherm bent voer je de aangemaakte gebruikersnaam in en klik je op inloggen. Het volgende scherm zal verschijnen.\\ In dit venster heb je 2 mogelijkheden:
\begin{itemize}
\item Productenlijst opvragen.
\subitem{-} Ook kan er hier producten worden besteld.
\item Bestelgeschiedenis opvragen.
\subitem{-} Bij een nieuwe gebruiker zal dit scherm nog leeg zijn bij opvragen.
\end{itemize}
\includegraphics{cf3}\\\\
Klik op de bestelgeschiedenisknop en het volgende scherm verschijnt. Zoals te zien is, zijn er nog geen bestellingen gemaakt door de gebruiker. Klik vervolgens op het sluit venster knop en bij het nieuwe formulier op Productenlijst\\\\
\includegraphics{cf4}\\\\
Het volgende scherm is verschenen. Via dit scherm kan men de huidige producten zien die aanwezig zijn en eventueel als de persoon dit wenst \'e\'en of meerdere producten bestellen. \\\\
\includegraphics[scale=0.70]{cf5}\\
\\Een product kan besteld worden door te dubbelklikken op het productID. Dit is een specifiek ID waaraan je een product kan herkennen. Indien er op een ander veld gedubbelklikt word zal er een foutmelding verschijnen. Hier kan dan op OK worden geklikt.
\\Als er op een prodID gedubbelklikt wordt zal het item belanden in de winkelwagen zoals hieronder te zien is.\\\\
\includegraphics[scale=0.70]{cf5_1}
Mocht de gebruiker meerdere items willen dan kan dit aangepast worden door nog een keer te dubbelklikken op het prodID. 
\\
Het aantal van hetzelfde product dat in de winkelwagen staat wordt met 1 opgehoogd en wordt het totaalbedrag bijgewerkt. Verder is het mogelijk om het aantal van een product aan te passen door te dubbelklikken op een productnaam in de winkelwagen. \\Een venster verschijnt met een regel waar getypt kan worden. Voer hier het nieuwe aantal in en klik op OK. Vervolgens wordt dit aangepast in de winkelwagen en zal ook het totaalbedrag worden bijgewerkt.\\\\
\includegraphics[scale=0.70]{cf5_2}\\\\
Als er een ander product geselecteerd word, zal deze ook in de winkelwagen verschijnen zoals te zien is in het volgende plaatje.\\
\includegraphics[scale=0.70]{cf5_3}\\
\\Als er op plaats bestelling wordt gedrukt verschijnt er na een tijdje de volgende melding.\\\\
\includegraphics{cf5_4}\\
\\Als er niet op "plaats bestelling" geklikt wordt ma op sluitvenster wordt het volgende getoond:
\\Als je op nee klikt verdwijnt het venster en verdwijnen ook de winkelwagenitems\\\\
\includegraphics{cf5_5}\\\\
Als je op Ja / Yes(in het bovenstaandeplaatje) klikt verschijnt er de melding dat de items zijn opgeslagen \\\\
\includegraphics{cf5_6}\\\\
Nadat het venster is gesloten klik je weer op de producten knop. Het producten venster verschijnt weer en zoals te zien is, is de winkelmand weer geladen.\\
\includegraphics[scale=0.70]{cf5_7}\\
\\
Als je op de resetknop klikt dan word de winkelwagen geleegd. zoals te zien is in het volgende plaatje.\\\\
\includegraphics[scale=0.70]{cf5_8}\\\\
Sluit dit venster weer, je komt weer bij de user gegevens scherm. Klik ditmaal op "Mijn bestelgeschiedenis". Het volgende scherm verschijnt en ditmaal met een ingevulde bestelgeschiedenis.\\\\
\includegraphics{cf6}\\



\newpage
\section{Persoonlijke bevindingen}
\subsection{Bevindingen Pleun Willemsen}
De opdracht intresseerde mij wel omdat ik in de toekomst hier meer wil gaan doen. Ik kende de term webservices wel en wist ook wel hoe het werkte maar had nooit zelf een applicatie gemaakt die communiceerd met deze functionaliteit. De opdracht liep voorspoedig, Walter en ik hadden allebei al kennis van het .NET framework en Visual Studio. Daarbij weten we elkaars goede en minder goede punten en kunnen we elkaar goed aanvullen.
\\\\
Net als Walter vind ik het vreemd/omslachtig waarom de webservice wel de LINQ objecten kan returnen, maar de Cli\"ent er geen raad mee weet.
\\\\
Wel is er veel tijd verloren gegaan omdat we de testen vanuit Visual Studio niet lekker aan de praat kregen. Daarom hebben we uit eindelijk maar gekozen om te testen met SoapUI.

\subsection{Bevindingen Walter Ebbers}
Mijn bevindingen van deze opdracht zijn positief. Heb eerder al eens met .NET en Visual Studio gewerkt waardoor ik al wat kennis had. Deze kennis was meer toegespits op het ontwikkelen van C\# in dotnet maar heb al eens eerder een klein programmatje in VB.NET gemaakt waardoor deze opdracht ook goed verliep.\\\\
Verder had ik nog nooit eerder met webservices gewerkt en dit vond ik dan ook mooi om te leren met deze opdracht. Ik zie echt dat een webservice veel mogelijkheden bied als deze goed ontwikkeld wordt. Wat ik wel vind is dat een webservice alleen nut heeft als meerdere applicaties er gebruik van maken. Mocht er maar 1 applicatie gebruik van maken dan lijkt het mij toch handiger misschien om de database connectie bijvoorbeeld in de applicatie te zetten en vanuit hier alles te regelen.
\\\\
Wat ik wel raar vond is dat er niet gemakkelijk linq objecten gereturned konden worden. Elke keer als we dit probeerden ging er ergens iets mis met het ophalen in de client. Hiervoor hebben we dus gebruik moeten maken van zogenaamde beans zoals ze ook wel bekend zijn bij Java DAO's en beans.

\newpage
\section{Bronnen}
\begin{itemize}
	\item Wikipedia - Webservice
	\item Colleges Distributed Services
\end{itemize}

\end{document}
